<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>URL编码、URL解码 - 在线工具 - OKTools</title>
    <meta name="keywords" content="URL编码,URL解码,encodeURI,encodeURIComponent">
    <meta name="description" content="在线URL编码、解码工具,URL解码,encodeURI,encodeURIComponent">
    <link rel="shortcut icon" href="/favicon.ico">
    <link href="https://cdn.bootcss.com/font-awesome/5.10.0-11/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
</head>
<body>
{{template "aside"}}
<main>
    <div class="container">
        <h1>URL编码/解码</h1>
        <textarea id="area_url" class="textarea mt-2" rows="6" onpaste="setTimeout(encode, 1)"></textarea>
        <div class="content-center mt-2">
            <button class="button" onclick="encode()">
                <i class="fa fa-arrow-down"></i>
                <span>编码</span>
            </button>
            <button class="button" onclick="decode()">
                <i class="fa fa-arrow-up"></i>
                <span>解码</span>
            </button>
            <button class="button" onclick="cleanup()">清空</button>
        </div>
        <h2 class="mt-2">encodeURI:</h2>
        <textarea id="area_encoded" class="textarea mt1" rows="6" onpaste="setTimeout(decode, 1)"></textarea>
        <h2 class="mt-2">encodeURIComponent:</h2>
        <textarea id="area_encoded_component" class="textarea mt1" rows="6"
                  onpaste="setTimeout(decode, 1)"></textarea>
        <div class="tile mt-2">
            <ul>
                <li>encodeURI()是Javascript中用来对URL编码的函数。它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号<strong>"; / ? : @ &
                        = + $ , #"</strong>，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%。
                </li>
                <li>encodeURIComponent()与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。因此<strong>"; / ? : @ & = + $
                        , #"</strong>，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。
                </li>
            </ul>
        </div>
    </div>
</main>
<script>
    let area_url = document.getElementById('area_url');
    let area_encoded = document.getElementById('area_encoded');
    let area_encoded_component = document.getElementById('area_encoded_component');

    function encode() {
        area_encoded.value = encodeURI(area_url.value);
        area_encoded_component.value = encodeURIComponent(area_url.value)
    }

    function decode() {
        if (area_encoded.value) {
            area_url.value = decodeURI(area_encoded.value)
        } else if (area_encoded_component.value) {
            area_url.value = decodeURIComponent(area_encoded_component.value)
        }
    }

    function cleanup() {
        area_url.value = '';
        area_encoded.value = '';
        area_encoded_component.value = '';
    }
</script>
</body>
</html>